<template>
  <view class="personInfo_box">
    <view class="personInfo">
      <view class="personInfo_item">
        <text>昵称</text><input type="text" placeholder="请输入你昵称" value="Tiff" />
      </view>
      <view class="personInfo_item" style="position: relative;">
        <text>手机号</text><input type="text" placeholder="收货人手机号" value="15601898833" />
        <text class="phone">更换手机号</text>
      </view>
      <view class="personInfo_item">
        <text>性别</text>
        <view class="uni-px-5 uni-pb-5">
          <uni-data-checkbox v-model="radio" :localdata="sex"></uni-data-checkbox>
        </view>
      </view>

      <view class="personInfo_item" style="position: relative;">
        <!-- <text>生日</text><input type="text" placeholder="1998-12-25" value="1998-12-25" /> -->

        <!-- <text class="phone">修改生日</text> -->
        <view class="uni-list">
          <view class="uni-list-cell" style="display: flex;">
            <view class="uni-list-cell-left">
              生日
            </view>
            <view class="uni-list-cell-db">
              <picker mode="date" :value="date" :start="startDate" :end="endDate"
                @change="bindDateChange">
                <view class="uni-input"
                  style="font-size: 24rpx;line-height: 50rpx;margin-left: 90rpx;position: relative;top: 20rpx;">
                  {{dataInfo}}
                </view>
              </picker>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 保存按钮 -->
  <button>保存并使用</button>
</template>

<script setup>
  import {
    ref,
    computed
  } from 'vue';
  let radio = ref(0);
  let sex = ref([{
    text: '先生',
    value: '男'
  }, {
    text: '女士',
    value: '女'
  }]);

  let dataInfo=ref();
  const startDate = computed(() => {
    console.log(888888);
    return getDate('start');
  });
  const endDate = computed(() => {
    console.log(9999999);
    return getDate('end');
  })

  function bindDateChange(e) {
    console.log(e);
    // date = e.detail.value;
    dataInfo.value=e.detail.value;
    // console.log(date, 151515);
  };
  dataInfo.value = getDate();
  // console.log(58588,date);
  function getDate(type) {
    console.log('0000000');
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    console.log(year, month, day,'1111111111');
    if (type == 'start') {
      year = year - 60;
    } else if (type == 'end') {
      year = year + 2;
    }
    month = month > 9 ? month : '0' + month;
    day = day > 9 ? day : '0' + day;
    return `${year}-${month}-${day}`;
  };
</script>

<style>
  page {
    background-color: #f8f8f8;
  }

  .personInfo_box {
    width: 100%;
    height: 400rpx;
    padding-left: 28rpx;
    padding-right: 28rpx;
    box-sizing: border-box;
    margin-top: 28rpx;
  }

  .personInfo {
    width: 100%;
    height: 100%;
    border-radius: 30rpx;
    background-color: #fff;
    padding-left: 28rpx;
    padding-right: 28rpx;
    box-sizing: border-box;
    font-size: 28rpx;
  }

  .personInfo_item {
    display: flex;
    align-items: center;
    width: 100%;
    line-height: 100rpx;
  }

  input {
    height: 100rpx;
    margin-left: 32rpx;
  }

  .personInfo_item text {
    display: block;
    width: 116rpx;
    font-size: 28rpx;
  }

  .uni-px-5 {
    margin-left: 24rpx;
    padding-right: 0px;
  }

  .uni-pb-5 {
    margin-top: 25rpx;
  }

  .phone {
    display: inline-block;
    width: 130rpx;
    line-height: 44rpx;
    border: 1rpx solid #ccc;
    border-radius: 44rpx;
    font-size: 18rpx !important;
    text-align: center;
    color: #aeaeae;
    position: absolute;
    right: 5rpx;
  }

  .addressTap_box {
    margin-top: 28rpx;
    width: 100%;
    height: 208rpx;
    padding-left: 28rpx;
    padding-right: 28rpx;
    box-sizing: border-box;
  }

  .addressTap {
    border-radius: 15rpx;
    width: 100%;
    height: 100%;
    padding-left: 28rpx;
    padding-right: 28rpx;
    box-sizing: border-box;
    background-color: #fff;
  }

  .addressTap_item1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    line-height: 100rpx;
    border-bottom: 1rpx solid #eee;
  }

  .addressTap_item1 text:first-child {
    flex: 0.6;
  }

  .addressTap_item1 text:not(:nth-child(1)) {
    display: inline-block;
    width: 126rpx;
    line-height: 48rpx;
    font-size: 26rpx;
    border: 1rpx solid #ccc;
    color: #ccc;
    border-radius: 5rpx;
    text-align: center;
  }

  .addressTap_item text {
    /* display: inline-block; */
    font-size: 28rpx;
  }

  .deful {
    width: 130rpx;
    line-height: 100rpx;
  }

  button {
    margin-top: 100rpx;
    width: 680rpx;
    line-height: 82rpx;
    border-radius: 82rpx;
    background-color: #0050c8;
    color: white;
    font-size: 32rpx;
    position: relative;
    bottom: -50rpx;
  }
</style>
